'use strict';
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    PixelRatio,
    Text,
    View,
	Image,
	TouchableWithoutFeedback,
	ScrollView
} from 'react-native';
import Swiper from 'react-native-swiper';

import css from '../../../common/common_css.js'
import dp from '../../../common/pxToDp.js'
class HomeSwiper extends Component{
    constructor(props) {
      	super(props);
      	this.state = {

      	};
		//屏蔽黄色警告
		console.disableYellowBox = true
    }
	//页面渲染前执行
	componentWillMount(){

	}

	//焦点图跳转页面
	focusClick(id){
		alert(`跳转到id为${id}的页面`);
	}
    render(){
		var focusImg=[];
		var json=this.props.data;
		json.forEach((item,index)=>{
			focusImg.push(
				<View
					style={[s.chunk,s.center]}
					>
					<TouchableWithoutFeedback
						onPress={this.focusClick.bind(this,item.id)}
						key={index}
					>
						<Image
							resizeMode="stretch"
							style={[s.chunkImg]}
							source={{uri:item.uri}}
						></Image>
					</TouchableWithoutFeedback>
				</View>
			)
		})
		return(
			<ScrollView
				horizontal={true}
				showsHorizontalScrollIndicator={false}
				>
				{focusImg}
			</ScrollView>
		)
    }
}

const s = StyleSheet.create(Object.assign(css,{
	chunk:{
		height:180,
		width:dp(375)
	},
	chunkImg:{
		height:140,
		width:dp(355)
	}
}));

module.exports=HomeSwiper;
